<template>
  <bs-dialog
    v-model="visible"
    :title="title"
    :width="700"
    :confirmBtnVisible="false"
    cancelBtnText="关闭"
  >
   <div class="table-wrap">
    <bs-table :loading="loading" :columns="columns" :data="tableData" :show-page="false"></bs-table>
   </div>
  </bs-dialog>
</template>
<script lang="ts" setup>
import BsTable from '@/components/table/BsTable.vue'
import {ref} from 'vue'
import * as API from '@/service/modules/resource'

const visible = ref(false)
const title = '查看账户'
const tableData = ref([])
const loading = ref(false)

const columns:ColumnItem[] = [
  {
    label: '账户',
    prop: 'username'
  }, {
    label: '密码',
    prop: 'password',
  }, {
    label: '协议',
    prop: 'protocol',
    width: 80
  }, {
    label: '端口',
    prop: 'port',
    
  }
]

/**
 * 获取账户列表
 */
const getList = async (info:any) => {
  loading.value = true
  const res:any = await API.getDeviceAccount({
    serial_num: info.serial_num
  })
  loading.value = false
  tableData.value = res.results || []
}

const open = (info:any) => {
  visible.value = true
  getList(info)
}
defineExpose({
  open
})
</script>
<style lang="scss" scoped>
.table-wrap {
  padding: 16px;
}
</style>